<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo实战</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .main{
            width: 300px;
            margin: auto;
        }

        .edit {
            display: block;
            width: 100%;
            height: 35px;
            line-height: 35px;
            box-sizing: border-box;
            padding-left: 4px;
            border-radius: 4px;
            border: 1px solid #ccc;
            outline: 0;
            box-shadow: 0 0 5px #ccc;
        }

        .list {
            margin: 0 auto;
            width: 100%;
        }
        .unit {
            position: relative;
            padding: 10px 0;
            border-bottom: 1px solid #efefef;
        }
        .unit:last-child {
            border-bottom: 0;
        }
        .finish {
            text-decoration: line-through;
            color: #ccc;
        }
        .del {
            background: red;
            text-decoration: none;
            position: absolute;
            right: 0;
            font-size: 12px;
            border: 0;
            outline: 0;
            padding: 2px 5px;
            border-radius: 5px;
            color: #fff;
        }
        .empty {
            font-size: 13px;
            color: #ccc;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>
<div id="app" class="main">
    <p>我的任务清单</p>
    <input v-model="task.content" type="text"
           @keydown.enter="addTask"
           placeholder="输入任务" class="edit">
    <div class="list">
        <p class="empty" v-if="list.length === 0">暂无任务</p>
        <div class="unit" v-for="(item,index) in list">
            <input type="checkbox"
                   @click="changeState(index)"
                   :checked="item.finished"
            >
            <span :class="{'finish':item.finished}">{{item.content}}</span>
            <button class="del" @click="removeTask(index)">删除</button>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data:{
            task:{
                content:'',
                finished:false, //未完成
                deleted:false //未删除
            },
            list:[]
        },
        methods: {
            //添加任务实现
            addTask () {
                this.list.push(this.task)
                this.task = {
                    content: '',
                    finished: false, //未完成
                    deleted: false //未删除
                }
            },
            changeState(index){
                let currState = this.list[index].finished
                this.list[index].finished = !currState
            },
            removeTask (index){
                this.list.splice(index,1)
            }
        }
    });
</script>
</body>
</html>